<script setup>
import { reactive, ref } from '@vue/reactivity'
import { computed, onBeforeUnmount, onMounted } from 'vue'
import { useStore } from 'vuex'
const store = useStore() //vuex
store.commit('getInfect') //提交获得common和api的方法
const isAndroid = store.state.isAndroid //安卓
const isiOS = store.state.isiOS //ios
const common = store.state.common.obj //common.js
const api = store.state.api
const isAnchor = common.userId >= 300000 && common.userId < 500000 ? true : false
// 定位
let cur = ref(0)
const getCur = async () => {
    await api.gameStage().then(res => {
        // res = {
        //     data: {
        //         "errcode": 0,
        //         "result": 3,
        //         "errmsg": "",
        //         "status": 200
        //     }
        // }
        if (res.data.status == 200) {
            cur.value = res.data.result
            getData()
        }
    })
}
// 赛段接口
const getData = () => {
    switch (cur.value) {
        case 0:
            getLeg1()
            break;
        case 1:
            getLeg2()
            break;
        case 2:
            getLeg3Date()
            break;
        default:
            getLeg5()
            // break;
    }
}
// 面板数据
let panelData = reactive({
    result: {}
})
// 1.报名赛
const getLeg1 = async () => {
    await api.leg1Panel({ anchorId: isAnchor ? common.userId : common.anchorId }).then(res => {
        // res = {
        //     data: {
        //         "errcode": 0,
        //         "result": {
        //             "limitProgress": 999,
        //             "progress": 0,
        //             "state": 0
        //         },
        //         "errmsg": "",
        //         "status": 200
        //     }
        // }
        if (res.data.result) panelData.result = res.data.result
    })
}
// 2.淘汰赛
const getLeg2 = async () => {
    await api.leg2Panel({ anchorId: isAnchor ? common.userId : common.anchorId }).then(res => {
        // res = {
        //     data: {
        //         "errcode": 0,
        //         "result": {
        //             "limitProgress": 999,
        //             "progress": 0,
        //             "state": 0
        //         },
        //         "errmsg": "",
        //         "status": 200
        //     }
        // }
        if (res.data.result) panelData.result = res.data.result
    })
}
let calendarId =ref(0)
// 3.晋级赛
const getLeg3Date = async () => {
    await api.leg3Calendar({ anchorId: isAnchor ? common.userId : common.anchorId }).then(res => {
        if (res.data.result){
            panelData.result = res.data.result
           
             res.data.result.forEach(item => {
                    if (item.flag == 1){
                        calendarId.value =item.calendarId
                        if(item.calendarId<4){
                            getLeg3()
                        }else{
                            getLeg3p2(item.calendarId)
                        }
                    }
                });
        }
    })
}

// 3.晋级赛1
const getLeg3 = async () => {
    await api.leg3Panel({ anchorId: isAnchor ? common.userId : common.anchorId }).then(res => {
        // res = {
        //     data: {
        //         "errcode": 0,
        //         "result": {
        //             "limitProgress": 999,
        //             "progress": 0,
        //             "state": 0
        //         },
        //         "errmsg": "",
        //         "status": 200
        //     }
        // }
        if (res.data.result) panelData.result = res.data.result
    })
}
// 4.晋级赛2
const getLeg3p2 = async () => {
    await api.leg4Panel({ anchorId: isAnchor ? common.userId : common.anchorId }).then(res => {
        // res = {
        //     data: {
        //     "errcode": 0,
        //     "result": {
        //         "state": 4,
        //         "day": 0,
        //         "groupRankNo": 0,
        //         "selfSuccess": 0,
        //         "otherSuccess": 0,
        //         "daySuccess": 0,
        //         "group": "0",
        //         "otherGroup": "1",
        //         "greater": 1,
        //         "groupUpCount": 0,
        //         "win": 2
        //     },
        //     "errmsg": "",
        //     "status": 200
        //     }
        // }
        if (res.data.result) panelData.result = res.data.result
    })
}
let timer1
let remainTime = ref(null)
// 5.决赛
const getLeg5 = async () => {
    await api.leg5panel({ anchorId: isAnchor ? common.userId : common.anchorId }).then(res => {
        // res = {
        //     data: {
        //         "errcode": 0,
        //         "result": {
        //             "failure": false,
        //             "cycle": 10,
        //             "rank": 9,
        //             "reach": 0,
        //             "remainPk": 0,
        //             "remainReqTime": 1671530934680,
        //             "remainSetTime": 1671530934681,
        //             "remainTime": 360000,
        //             "stage": 1,
        //             "state": 2,
        //             "totalCycle": 0,
        //             "victory": 3,
        //             "wins": 0,
        //             "gameScore": 2000.1
        //         },
        //         "errmsg": "",
        //         "status": 200
        //     }
        // }
        let data = res.data.result
        if (data) {
            panelData.result = data
            remainTime.value = data.remainTime - (data.remainSetTime - data.remainReqTime)
            clearInterval(timer1);
            timer1 = setInterval(function () {
                if (remainTime.value < 1000) {
                    clearInterval(timer1);
                    return;
                }
                remainTime.value -= 1000
            }, 1000);
        }
    })
}
const countClockTime = (t) => {
    if (t <= 0) {
        return '00:00';
    }
    t /= 1000;
    var h = parseInt(t / (60 * 60));
    var m = parseInt(t % (60 * 60) / 60);
    var s = parseInt(t % 60);
    if (h <= 0) {
        var res = (m < 10 ? ('0' + m) : m) + ':' + (s < 10 ? ('0' + s) : s)
    } else {
        var res = (h < 10 ? '0' + h : h) + ':' + (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s);
    }
    return res;
}

const panel = computed(() => {
    // console.log(panelData.result);
    return panelData.result
})
let time
onMounted(() => {
    getCur()
    time = setInterval(async () => {
        getData()
    }, 8 * 1000);
})
onBeforeUnmount(() => {
    clearInterval(time)
})
// 判断版本号添加类名的方法
function toNum (d) {
    let a = d.toString();
    let c = d.split(".");
    let num_place = ["", "0", "00", "000", "0000"],
        r = num_place.reverse();
    for (let i = 0; i < c.length; i++) {
        let len = c[i].length;
        c[i] = r[len] + c[i];
    }
    let res = c.join("");
    return res;
}
const compareVersion = (a, b) => {
    let alen = a.split(".").length;
    let blen = b.split(".").length;
    if (alen < blen) {
        for (let i = 0; i < blen - alen; i++) {
            a += ".0";
        }
    } else if (blen < alen) {
        for (let i = 0; i < alen - blen; i++) {
            b += ".0";
        }
    }
    let _a = toNum(a),
        _b = toNum(b);
    return _a - _b;
};
const setRem = () => {
    function setRem () {
        var designWidth = 150,
            rem2px = 100;
        document.documentElement.style.fontSize =
            (document.documentElement.clientWidth / designWidth) * rem2px + "px";
    }
    window.onresize = setRem;
    setRem();
}
// 判断版本号添加类名
let sizeClass = ''
if (isAndroid) {
    setRem()
    if (compareVersion(common.version, "4.1.5.0") < 0) {
        sizeClass = "mss";
    } else {
        sizeClass = "mnew";
    }
} else if (isiOS) {
    setRem()
    if (compareVersion(common.version, "4.7.5.0") < 0) {
        sizeClass = "mss";
    } else {
        sizeClass = "mnew";
    }
} else {
    if (compareVersion(common.version, "2.77.0.0") < 0) {
        sizeClass = "pc";
    } else {
        sizeClass = "pcnew";
    }
}
//跳转活动页
const jumpPage = () => {
    const showurl =
        "https://page.qxiu.com/activity/2024/march/index-m.html" +
        window.location.search;
    if (isiOS) {
        window.location.href =
            "#guagua://qiqi::9::2:" + encodeURIComponent(showurl);
    } else if (isAndroid) {
        window.location.href =
            "guagua://qiqi::9::2:" + encodeURIComponent(showurl);
    } else {
        window.open(
            "https://page.qxiu.com/activity/2024/march/index.html" +
            window.location.search +
            "&width=1029&height=668&title=春季联赛2024&openWay=0&fromeHall=0"
        );
    }
}
</script>

<template>
    <div class="wrap" @click="jumpPage" v-cloak :class="sizeClass">
        <div class="leg1" v-if="cur == 0">
            <div v-if="panel.state == 2" class="lose">
                <span>好遗憾</span>
                <span>主播<br>未报名成功</span>
            </div>
            <div v-else-if="panel.state == 1" class="lose success">
                <span>恭喜!</span>
                <span>报名成功</span>
            </div>
            <div v-else class="lose enrolling">
                <div>报名进度</div>
                <div>
                    <p>今日收到联赛票</p>
                    <p>{{ panel.progress >= panel.limitProgress ? panel.limitProgress : panel.progress }}/{{
                        panel.limitProgress }}</p>
                </div>
            </div>
        </div>
        <div class="leg1 leg2" v-else-if="cur == 1">
            <div class="lose" v-if="panel.aheadLoser">
                <span>好遗憾</span>
                <span>主播未晋级~</span>
            </div>
            <ul v-else class="leg2Info">
                <li>
                    <p>赛段排名</p>
                    <p>{{ panel.rank }}</p>
                </li>
                <li>
                    <p>今日联赛值</p>
                    <p>{{ panel.todayScore }}</p>
                </li>
                <li>
                    <p>晋级名额</p>
                    <p>前{{ panel.risePlaces }}名</p>
                </li>
            </ul>
        </div>
        <div class="leg1 leg2" v-else-if="cur == 2&&calendarId<4">
            <div class="lose" v-if="panel.aheadLoser">
                <span>好遗憾</span>
                <span>主播未晋级~</span>
            </div>
            <ul v-else class="leg2Info">
                <li>
                    <p>赛段排名</p>
                    <p>{{ panel.rank }}</p>
                </li>
                <li>
                    <p>今日有效胜场</p>
                    <p>{{ panel.todayPkWins }}</p>
                </li>
                <li>
                    <p>晋级名额</p>
                    <p>前{{ panel.risePlaces }}名</p>
                </li>
            </ul>
        </div>
        <div class="leg1 leg2" v-else-if="cur == 2&&calendarId>=4">
            <div class="lose" v-if="panel.state == 0">
                <span>晋级赛PK</span>
                <span>19点开战</span>
            </div>
            <div v-else-if="panel.state==1" class="lose success">
                <span>晋级赛PK</span>
                <span>明日19点开战</span>
            </div>
            <div v-else-if="panel.state==2" class="lose success">
                <span>恭喜!</span>
                <span>已晋级</span>
            </div>
            <div v-else-if="panel.state==3" class="lose">
                <span>好遗憾</span>
                <span>主播未晋级~</span>
            </div>
            <div v-else-if="panel.state==5" class="lose">
                <span>好遗憾</span>
                <span>主播未晋级~</span>
            </div>
            <ul v-else class="leg2Info">
                <template v-if="panel.day==0">
                    <li class="res">
                        <p v-if="(panel.win!=0)&&(panel.state==4)">本场{{ panel.win==1?'胜利':( panel.win==2?'失败':'平局') }}</p>
                    </li>
                    <li>
                        <p>今日胜场</p>
                        <p>{{ panel.daySuccess }}</p>
                    </li>
                    <li>
                        <p>{{panel.group==0?'A':'B'}}组组内排名</p>
                        <p>{{ panel.groupRankNo }}</p>
                    </li>
                    <li>
                        <p>组内晋级名额</p>
                        <p>前{{ 26 }}名</p>
                    </li>
                </template>
                 <template v-else-if="panel.day==1">
                    <li class="res">
                        <p v-if="(panel.win!=0)&&(panel.state==4)">本场{{ panel.win==1?'胜利':( panel.win==2?'失败':'平局') }}</p>
                    </li>
                    <li>
                        <p>今日胜场</p>
                        <p>{{ panel.daySuccess }}</p>
                    </li>
                    <li>
                        <p>{{panel.group==0?'A':'B'}}组组内排名</p>
                        <p>{{ panel.groupRankNo }}</p>
                    </li>
                    <li>
                        <p>{{panel.greater>0?'领先':(panel.greater<0?'落后':'战平')}}{{panel.otherGroup==0?'A':'B'}}组</p>
                        <p>{{ Math.abs(panel.greater) }}场</p>
                    </li>
                </template>
                 <template v-if="panel.day==2">
                    <li class="res">
                        <p v-if="(panel.win!=0)&&(panel.state==4)">本场{{ panel.win==1?'胜利':( panel.win==2?'失败':'平局') }}</p>
                    </li>
                    <li>
                        <p>今日胜场</p>
                        <p>{{ panel.daySuccess }}</p>
                    </li>
                    <li>
                        <p>{{panel.group==0?'A':'B'}}组组内排名</p>
                        <p>{{ panel.groupRankNo }}</p>
                    </li>
                    <li>
                        <p>组内晋级名额</p>
                        <p>前{{ panel.groupUpCount }}名</p>
                    </li>
                </template>
            </ul>
        </div>
        <div class="leg1 leg2 leg4" v-else>
            <div class="lose" v-if="panel.failure">
                <span>好遗憾</span>
                <span>主播已被淘汰</span>
            </div>
            <template v-else>
                <template v-if="panel.state == 0">
                    <div class="lose" v-if="panel.stage == 0">
                        <span>王者加冕</span>
                        <span>19点开战</span>
                    </div>
                    <div class=" lose lose2" v-if="panel.stage == 1">
                        <span>王者加冕</span>
                        <span>第2轮</span>
                        <span>{{ countClockTime(remainTime) }}</span>
                    </div>
                </template>
                <template v-else-if="panel.state == 1">
                    <div class="raceResult"
                        :class="{ 'raceResult1': panel.victory == 3, 'raceResult2': panel.victory == 2 }"
                        v-if="panel.victory != 0">
                        {{ panel.victory == 1 ? '本局胜利' : panel.victory == 2 ? '本局失利' : '本局平局' }}</div>
                    <ul class="leg2Info">
                        <li>
                            <p>决战分</p>
                            <p>{{ panel.gameScore }}</p>
                        </li>
                        <li>
                            <p>当前排名</p>
                            <p>{{ panel.rank }}</p>
                        </li>
                        <li :class="{ active: panel.victory == 0 }">
                            还剩{{ panel.totalCycle-panel.cycle }}场PK
                        </li>
                    </ul>
                </template>
                <div class="lose lose3" v-else-if="panel.state == 2">
                    <span>恭喜主播获得</span>
                    <span>春季联赛<br>{{ panel.rank == 1 ? '冠军' : panel.rank == 2 ? '亚军' : panel.rank == 3 ? '季军' : '第' +
                        panel.rank + '名' }}</span>
                </div>
            </template>
        </div>
    </div>
</template> 

<style lang='scss' scoped></style>